<template>
  <div style="background: #f2f2f2;height: 100%">
    <div class="title">
      <label style="color: #ffffff; font-size: 28px;">产品详情</label>
    </div>

    <!-- 基本信息 -->
    <div class="flex-content" style="margin-top: 4px;padding-bottom: 16px;border-radius: 16px; background: #fafafa">
      <div style="float: left;width: 100%;align-content: flex-start;text-align: left">
        <div style="margin-left: 20px; font-size: 24px">{{ baseInfo.fundName }}</div>
        <div style="margin-left: 26px">
          <span style="font-size: 12px">{{ baseInfo.fundCode }}</span>
          <span style="font-size: 14px;border: cornflowerblue; color: #26B4FF; margin-left: 16px">{{
              baseInfo.fundRiskLevel
            }}</span>
        </div>
      </div>
      <div style="margin-top: 20px">
        <span style="width: 33%; display: inline-block; vertical-align: center">
          <div style="font-size: x-large">{{ baseInfo.fundManagerName }}</div>
          <div class="dark">基金经理</div>
        </span>
        <span style="width: 33%; display: inline-block; vertical-align: center">
          <div v-if="baseInfo.rate >= 0" style="color: #ff4444">{{ baseInfo.rate }}</div>
          <div v-else style="color: #42b983">{{ baseInfo.rate }}</div>
          <div class="dark">日跌涨幅</div>
        </span>
        <span style="width: 33%; display: inline-block; vertical-align: center">
          <div>{{ baseInfo.value }}</div>
          <div class="dark">最新净值</div>
        </span>
      </div>
    </div>

    <!-- 业绩走势 -->
    <div class="flex-content" style="margin-top: 4px;padding-bottom: 16px;border-radius: 16px; background: #fafafa">
      <div style="width: 100%">
        <label style="color: deepskyblue;font-size: 18px; float: left;width: 100%;text-align: left;margin-left: 20px">业绩走势</label>
      </div>
      <!-- 折线图 -->
      <div id="echarts1" style="width: 100%; height: 360px">

      </div>
      <div style="width: 100%">
        <el-radio-group v-model="radio" size="small" @change="selectDay">
          <el-radio-button board v-model="radio" label="31" style="width: 20%">近1月</el-radio-button>
          <el-radio-button board v-model="radio" label="91" style="width: 20%">近3月</el-radio-button>
          <el-radio-button board v-model="radio" label="182" style="width: 20%">近6月</el-radio-button>
          <el-radio-button board v-model="radio" label="365" style="width: 20%">近1年</el-radio-button>
          <el-radio-button board v-model="radio" label="1096" style="width: 20%">近3年</el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <!-- 基金档案 -->
    <div class="flex-content" style="margin-top: 4px;padding-bottom: 16px;border-radius: 16px; background: #fafafa">
      <div style="width: 100%">
        <label style="color: deepskyblue;font-size: 18px; float: left;width: 100%;text-align: left;margin-left: 20px">基金档案</label>
      </div>
      <div class="flex-content" style="width: 100%">
        <div style="margin-top: 20px">
          <span style="width: 50%; display: inline-block; vertical-align: center">
            <div class="dark">基金规模</div>
            <div>{{ historyInfo.fundScale }}</div>
          </span>
          <span style="width: 50%; display: inline-block; vertical-align: center">
            <div class="dark">成立时间</div>
            <div>{{ historyInfo.fundSetupDate }}</div>
          </span>
        </div>
      </div>

      <div class="flex-content" style="width: 100%">
        <div style="margin-top: 20px">
          <span style="width: 25%; display: inline-block; vertical-align: center">
            <div v-if="historyInfo.maxYearUp >= 0" style="color: #ff4444">{{ historyInfo.maxYearUp }}</div>
            <div v-else style="color: #42b983">{{ historyInfo.maxYearUp }}</div>
            <div class="dark">最大年增长率</div>
          </span>
          <span style="width: 25%; display: inline-block; vertical-align: center">
            <div v-if="historyInfo.maxYearDown >= 0" style="color: #ff4444">{{ historyInfo.maxYearDown }}</div>
            <div v-else style="color: #42b983">{{ historyInfo.maxYearDown }}</div>
            <div class="dark">最小年增长率</div>
          </span>
          <span style="width: 25%; display: inline-block; vertical-align: center">
            <div style="color: #ff4444">{{ historyInfo.yearUpPercent }}</div>
            <div class="dark">增长年份占比</div>
          </span>
          <span style="width: 25%; display: inline-block; vertical-align: center">
            <div style="color: #ff4444">{{ historyInfo.yearDownPercent }}</div>
            <div class="dark">下降年份占比</div>
          </span>
        </div>
      </div>

      <div class="el-divider">
        <el-divider/>
      </div>
      <div style="width: 100%;margin-top: 20px">
        <label style="color: #999999;font-size: 14px; float: left;width: 100%;text-align: left;margin-left: 20px">成立以来年末净值</label>
      </div>
      <div style="width: 100%; margin-bottom: 20px">
        <el-table :data="rateReturn">
          <el-table-column
              prop="fundDate"
              label="日期"
              width="180"/>
          <el-table-column
              prop="setupDateRate"
              label="净值 (%)"
              width="180"/>
        </el-table>
      </div>
    </div>
    <div>
      <el-divider></el-divider>
    </div>

    <div style="position:fixed;bottom: 0;width: 100%;height: 60px">
      <el-button type="info" style="width: 100%; height: 60px" @click="removeMyFund">取消自选</el-button>
    </div>
  </div>

</template>


<script>

import Cookies from 'js-cookie'
import axios from "../../plugins/axiosConfig";
import * as echarts from "echarts";
import {fundBaseUrl, fundHistoryUrl, fundRateRecentlyUrl, fundYearEndUpRateUrl, removeFundUrl} from "../../utils/api";

export default {
  data() {
    return {
      radio: '31',
      baseInfo: {
        // fundCode: "000001",
        // fundName: "华夏成长混合",
        // value: 1.4010,
        // rate: 0.00,
        // fundRiskLevel: "中高风险",
        // fundManagerName: '王宝强'
      },
      historyInfo: {
        // fundCode: "000001",
        // fundScale: "48.10亿",
        // fundSetupDate: "2001-12-18",
        // maxYearUp: 25.61,
        // maxYearDown: 25.61,
        // yearUpPercent: "NaN",
        // yearDownPercent: "NaN"
      },

      option1: {
        tooltip: {
          trigger: 'axis',
          // formatter: function (a) {
          //   return a + ' %';
          // },
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value',
          scale: false,
          axisLabel: {
            show: true,
            interval: 'auto',
            formatter: '{value} %'
          },
          show: true
        },
        series: [{
          data: [1, 32, 1, 34, 12, 13, 20],
          type: 'line',
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "red" },
                { offset: 0.5, color: "yellow" },
                { offset: 1, color: "green" }
              ])
            }
          },
          itemStyle: {
            normal: {
              label: {
                show: true,
                // formatter: '{data} %'
              }
            }
          },

        }]
      },
      rateReturn: [
        {
          fundDate: '2020-12-31',
          setupDateRate: 123
        }
      ]
    }
  },
  methods: {
    selectDay() {
      console.log(this.radio)
      this.chart1Refresh();
    },
    removeMyFund() {
      var fundCode = this.$route.params.fundCode;
      axios.delete(removeFundUrl + `?fundCode=${fundCode}`).then((res) => {
        if (res.status === 200) {
          console.log(res.data.data)
          this.baseInfo = res.data.data;
          this.$router.push(`/my`)
          // this.myFunds = res.data.data;
        }
      })
    },
    chart1Refresh() {
      var fundCode = this.$route.params.fundCode;
      axios.get(fundRateRecentlyUrl + `/${fundCode}/${this.radio}`).then((res) => {
        if (res.status === 200) {
          console.log(res.data.data);
          let rates = []
          rates = res.data.data.rates;

          this.option1.xAxis.data = [];
          this.option1.series[0].data = [];
          rates.forEach(rate => {
            this.option1.xAxis.data.push(rate.date);
            this.option1.series[0].data.push(rate.rate);

          })
          var element1 = document.getElementById('echarts1');
          var chart1 = echarts.init(element1);
          console.log("option1", this.option1)
          chart1.setOption(this.option1, true, false);
          window.onresize = chart1.resize();
        }
      })
    }
  },
  mounted() {
    console.log(Cookies.get('user'))
    var fundCode = this.$route.params.fundCode;
    axios.get(fundBaseUrl + `/${fundCode}`).then((res) => {
      if (res.status === 200) {
        console.log(res.data.data)
        this.baseInfo = res.data.data;
        // this.myFunds = res.data.data;
      }
    })
    axios.get(fundHistoryUrl + `/${fundCode}`).then((res) => {
      if (res.status === 200) {
        console.log(res.data.data)
        this.historyInfo = res.data.data;
        // this.myFunds = res.data.data;
      }
    })
    // document.getElementById('echarts1').setAttribute('_echarts_instance_', '')
    axios.get(fundRateRecentlyUrl + `/${fundCode}/${this.radio}`).then((res) => {
      if (res.status === 200) {
        console.log(res.data.data);
        let rates = []
        rates = res.data.data.rates;

        this.option1.xAxis.data = [];
        this.option1.series[0].data = [];
        rates.forEach(rate => {
          this.option1.xAxis.data.push(rate.date);
          this.option1.series[0].data.push(rate.rate);

        })
        var element1 = document.getElementById('echarts1');
        var chart1 = echarts.init(element1);
        console.log("option1", this.option1)
        chart1.setOption(this.option1, true, false);
        window.onresize = chart1.resize();
      }
    })

    axios.get(fundYearEndUpRateUrl + `/${fundCode}`).then((res) => {
      if (res.status === 200) {
        console.log(res.data.data)
        // todo 有数据放开
        // this.rateReturn = res.data.data;
      }
    })

  },
  name: 'detail'
}
</script>

<style>
.title {
  height: 60px;
  width: 100%;
  line-height: 60px;
  background-color: cornflowerblue;
  align-content: center;
  margin: auto;
  text-align: center;
}

.dark {
  color: #999999;
}


</style>